<template>
  <view class="container">
    <!-- 返回导航栏 -->
    <view class="nav-bar">
      <text class="back-icon" @click="goBack">返回</text>
      <text class="title">编辑药品</text>
    </view>

    <!-- 表单区域 -->
    <scroll-view scroll-y class="form-container">
      <!-- 图片上传 -->
      <view class="upload-section">
        <image
          :src="formData.imageUrl || '/static/medicine-placeholder.png'"
          mode="aspectFill"
          class="medicine-image"
          @click="chooseImage"
        />
        <text class="upload-tip">点击更换图片</text>
      </view>

      <!-- 基本信息 -->
      <view class="form-section">
        <view class="form-item">
          <text class="label">药品名称</text>
          <input
            v-model="formData.name"
            class="input"
            placeholder="请输入药品名称"
          />
        </view>

        <view class="form-item">
          <text class="label">规格</text>
          <input
            v-model="formData.specification"
            class="input"
            placeholder="请输入药品规格"
          />
        </view>

        <view class="form-item">
          <text class="label">剩余数量</text>
          <input
            v-model="formData.remainingQuantity"
            class="input"
            type="number"
            placeholder="请输入剩余数量"
          />
        </view>

        <view class="form-item">
          <text class="label">生产日期</text>
          <picker
            mode="date"
            :value="formatDate(formData.productionDate)"
            @change="onProductionDateChange"
          >
            <view class="picker-value">
              {{ formatDate(formData.productionDate) || '请选择生产日期' }}
            </view>
          </picker>
        </view>

        <view class="form-item">
          <text class="label">有效期至</text>
          <picker
            mode="date"
            :value="formatDate(formData.expiryDate)"
            @change="onExpiryDateChange"
          >
            <view class="picker-value">
              {{ formatDate(formData.expiryDate) || '请选择有效期' }}
            </view>
          </picker>
        </view>
      </view>

      <!-- 用法用量 -->
      <view class="form-section">
        <view class="section-title">用法用量</view>
        <textarea
          v-model="formData.usage"
          class="textarea"
          placeholder="请输入用法用量说明"
        />
      </view>

      <!-- 注意事项 -->
      <view class="form-section">
        <view class="section-title">注意事项</view>
        <textarea
          v-model="formData.precautions"
          class="textarea"
          placeholder="请输入注意事项"
        />
      </view>

      <!-- 分类选择 -->
      <view class="form-section">
        <view class="section-title">分类</view>
        <view class="category-list">
          <view
            v-for="category in categories"
            :key="category.id"
            class="category-item"
            :class="{ 'active': formData.categoryId === category.id }"
            @click="selectCategory(category.id)"
          >
            {{ category.name }}
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 保存按钮 -->
    <view class="save-btn" @click="handleSave">保存修改</view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

// 获取路由参数
const medicineId = ref<number>(Number(uni.getStorageSync('currentMedicineId')))

// 表单数据
const formData = ref({
  name: '',
  imageUrl: '',
  specification: '',
  remainingQuantity: '',
  productionDate: new Date(),
  expiryDate: new Date(),
  usage: '',
  precautions: '',
  categoryId: 0,
  efficacy: ''
})

// 分类数据
const categories = ref([
  { id: 0, name: '全部' },
  { id: 1, name: '感冒药' },
  { id: 2, name: '消炎药' },
  { id: 3, name: '维生素' },
  { id: 4, name: '止痛药' }
])

// 格式化日期
const formatDate = (date: Date) => {
  return new Date(date).toISOString().split('T')[0]
}

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      formData.value.imageUrl = res.tempFilePaths[0]
    }
  })
}

// 选择分类
const selectCategory = (categoryId: number) => {
  formData.value.categoryId = categoryId
}

// 日期选择处理
const onProductionDateChange = (e: any) => {
  formData.value.productionDate = new Date(e.detail.value)
}

const onExpiryDateChange = (e: any) => {
  formData.value.expiryDate = new Date(e.detail.value)
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 加载药品详情
const loadMedicineDetail = async () => {
  // TODO: 调用接口获取药品详情
  // 模拟数据
  setTimeout(() => {
    formData.value = {
      name: '阿莫西林胶囊',
      imageUrl: '',
      specification: '0.25g*24粒',
      remainingQuantity: '20',
      productionDate: new Date(2024, 0, 1),
      expiryDate: new Date(2025, 0, 1),
      usage: '口服。一次1粒，一日3次。',
      precautions: '对青霉素类药物过敏者禁用\n服药期间忌烟酒\n如出现皮疹等过敏反应请立即停药\n儿童、孕妇慎用',
      categoryId: 2,
      efficacy: '用于敏感菌所致的感染'
    }
  }, 500)
}

// 保存修改
const handleSave = async () => {
  // TODO: 表单验证
  if (!formData.value.name) {
    uni.showToast({
      title: '请输入药品名称',
      icon: 'none'
    })
    return
  }

  // TODO: 调用接口保存数据
  uni.showLoading({
    title: '保存中...'
  })

  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '保存成功',
      icon: 'success'
    })
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  }, 1000)
}

onMounted(() => {
  loadMedicineDetail()
})
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f8f8f8;
  padding-bottom: 120rpx;
  padding-top: 88rpx;
}

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 88rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  z-index: 100;
  border-bottom: 1rpx solid #f0f0f0;

  .back-icon {
    font-size: 28rpx;
    color: #333333;
  }

  .title {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin-right: 44rpx;
  }
}

.form-container {
  height: calc(100vh - 208rpx);
}

.upload-section {
  background: #ffffff;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20rpx;

  .medicine-image {
    width: 300rpx;
    height: 300rpx;
    border-radius: 8rpx;
    margin-bottom: 16rpx;
  }

  .upload-tip {
    font-size: 24rpx;
    color: #999999;
  }
}

.form-section {
  background: #ffffff;
  padding: 30rpx;
  margin-bottom: 20rpx;

  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 20rpx;
  }

  .form-item {
    margin-bottom: 24rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .label {
      font-size: 28rpx;
      color: #333333;
      margin-bottom: 12rpx;
      display: block;
    }

    .input {
      width: 100%;
      height: 80rpx;
      background: #f8f8f8;
      border-radius: 8rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
      color: #333333;
    }

    .picker-value {
      width: 100%;
      height: 80rpx;
      background: #f8f8f8;
      border-radius: 8rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
      color: #333333;
      line-height: 80rpx;
    }
  }

  .textarea {
    width: 100%;
    height: 200rpx;
    background: #f8f8f8;
    border-radius: 8rpx;
    padding: 20rpx;
    font-size: 28rpx;
    color: #333333;
  }

  .category-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10rpx;

    .category-item {
      margin: 10rpx;
      padding: 12rpx 24rpx;
      background: #f8f8f8;
      border-radius: 32rpx;
      font-size: 28rpx;
      color: #666666;

      &.active {
        background: #018d71;
        color: #ffffff;
      }
    }
  }
}

.save-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: #018d71;
  color: #ffffff;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>